<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbItems = computed(() => {
  // 这里的 route.matched 是一个数组，包含了当前路由及其所有父路由
  // 通过 filter 方法过滤出 meta.title 存在的路由
  // 然后通过 map 方法将这些路由转换为包含 path 和 title 的对象
  // 最后返回一个包含所有面包屑项的数组
  const matchedRoutes = route.matched.filter(route => route.meta.title)
  return matchedRoutes.map(route => ({
    path: route.path,
    title: route.meta.title as string
  }))
})
</script>

<template>
  <el-breadcrumb>
    <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped lang="scss">
.el-breadcrumb {
  margin-left: 10px;
}
</style>
